<template>
  <div>
      <van-nav-bar title="我的地址"  left-arrow>
  <template #right>
      <div @click="onclick">新增地址</div>
  </template>
</van-nav-bar>
    <div>
        <van-swipe-cell>
            <div class="hezi" v-for="(item,index) in list" :key="index">
                <div class="hezi1">
                    <van-checkbox v-model="checked" checked-color="#ee0a24"></van-checkbox>
                </div>
                <div>
                 <p>{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号{{item.tel}}</p>
                 <p style="font-size:5px">{{item.city}}.{{item.province}}.{{item.county}}.{{item.addressDetail}}</p>
                </div>
            </div>
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
        
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
        list:JSON.parse(localStorage.getItem('item'))||{},
        checked: true,
    };
  },
  created(){
        console.log(this.list)
  },
  methods: {
    onclick(){
        this.$router.push({ path:"/address"}); 
    }
  },
};
</script>

<style>
.hezi{
    width: 100%;
    height: 80px;
    display: flex;
}
.hezi1{
    width: 40px;
    height: 80px;
   display: flex;
   justify-content: center;

}
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>